<template>
  <div class="add-student-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <h3>添加学生信息</h3>
        </div>
      </template>
      <el-form :model="studentForm" :rules="rules" ref="studentFormRef" label-width="100px">
        <el-form-item label="学号" prop="id">
          <el-input v-model="studentForm.id" placeholder="请输入学号" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="studentForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="studentForm.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input-number v-model="studentForm.age" :min="16" :max="30" />
        </el-form-item>
        <el-form-item label="班级" prop="class">
          <el-select v-model="studentForm.class" placeholder="请选择班级">
            <el-option label="计算机1班" value="计算机1班" />
            <el-option label="计算机2班" value="计算机2班" />
            <el-option label="计算机3班" value="计算机3班" />
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-select v-model="studentForm.major" placeholder="请选择专业">
            <el-option label="计算机科学与技术" value="计算机科学与技术" />
            <el-option label="软件工程" value="软件工程" />
            <el-option label="人工智能" value="人工智能" />
            <el-option label="数据科学" value="数据科学" />
            <el-option label="网络工程" value="网络工程" />
            <el-option label="信息安全" value="信息安全" />
            <el-option label="物联网工程" value="物联网工程" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="studentForm.phone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="家庭住址" prop="address">
          <el-input v-model="studentForm.address" placeholder="请输入家庭住址" type="textarea" :rows="2" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button @click="$router.push('/home/student')">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const studentFormRef = ref(null)

// 学生表单数据
const studentForm = reactive({
  id: '',
  name: '',
  gender: '男',
  age: 20,
  class: '',
  major: '',
  phone: '',
  address: ''
})

// 表单验证规则
const rules = {
  id: [
    { required: true, message: '请输入学号', trigger: 'blur' },
    { pattern: /^\d{7}$/, message: '学号必须为7位数字', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 10, message: '姓名长度在2到10个字符之间', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  class: [
    { required: true, message: '请选择班级', trigger: 'change' }
  ],
  major: [
    { required: true, message: '请选择专业', trigger: 'change' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '请输入家庭住址', trigger: 'blur' }
  ]
}

// 提交表单
const submitForm = () => {
  studentFormRef.value.validate((valid) => {
    if (valid) {
      // 模拟添加学生信息
      // 实际项目中，这里应该调用API将数据提交到后端
      
      // 获取本地存储的学生数据
      let students = JSON.parse(localStorage.getItem('students') || '[]')
      
      // 检查学号是否已存在
      const isExist = students.some(student => student.id === studentForm.id)
      if (isExist) {
        ElMessage.error('该学号已存在，请重新输入')
        return
      }
      
      // 添加新学生
      students.push({
        ...studentForm
      })
      
      // 保存到本地存储
      localStorage.setItem('students', JSON.stringify(students))
      
      ElMessage.success('添加学生成功')
      router.push('/home/student')
    } else {
      ElMessage.error('请正确填写表单信息')
      return false
    }
  })
}

// 重置表单
const resetForm = () => {
  studentFormRef.value.resetFields()
}
</script>

<style scoped>
.add-student-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>